
<div v-bind:class="[componentId]">
    <cly-header>
        <template v-slot:header-left>
            <h2> {{i18n('carriers.title')}} 
            </h2>
            <span class="cly-vue-tooltip-icon ion ion-help-circled" style="margin-left:10px" v-tooltip.top-center="description">
            </span>
        </template>
		<template v-slot:header-right>
          <cly-more-options v-if="topDropdown" size="small">
            <el-dropdown-item :key="idx" v-for="(item, idx) in topDropdown">
			  <!--<span :class="item.icon"></span>-->
              <a :href="item.value" class="bu-ml-1">{{item.label}}</a>
            </el-dropdown-item>
          </cly-more-options>
        </template>
    </cly-header>
    <cly-main>
		<cly-date-picker-g class="app-carrier-date-picker-container"></cly-date-picker-g>
		<cly-section>
			<div class="bu-columns bu-is-gapless technology-pie-graphs">
				<div class="bu-column bu-is-6">
					<cly-chart-pie :option="pieOptionsNew" :showToggle="false" v-loading="isLoading" :force-loading="isLoading"></cly-chart-pie>
				</div>
				<div class="bu-column bu-is-6">
					<cly-chart-pie :option="pieOptionsTotal" :showToggle="false" v-loading="isLoading" :force-loading="isLoading"></cly-chart-pie>
				</div>
			</div>
		</cly-section>
		<cly-section>
			<cly-datatable-n  :rows="appCarrierRows" :resizable="true" :force-loading="isLoading">
				<template v-slot="scope">
					<el-table-column sortable="custom"  prop="carriers" :label="i18n('carriers.table.carrier')"></el-table-column>
					<el-table-column sortable="custom" :formatter="numberFormatter" prop="t" :label="i18n('common.table.total-sessions')"></el-table-column>
					<el-table-column sortable="custom" :formatter="numberFormatter" prop="u" :label="i18n('common.table.total-users')"></el-table-column>
					<el-table-column sortable="custom" :formatter="numberFormatter" prop="n" :label="i18n('common.table.new-users')"></el-table-column>
				</template>
			</cly-datatable-n>
		</cly-section>
    </cly-main>
</div>